<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />购房贴士
    </view>
    <!-- <view class="title">
      <view style="left: 0rpx" :class="xuanIndex == -1 ? 'xuan' : ''" @click="xuan(-1)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == -1" />全部
      </view>
      <view style="left: 124rpx" :class="xuanIndex == 0 ? 'xuan' : ''" @click="xuan(0)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == 0" />楼市动向
      </view>
      <view style="left: 312rpx" :class="xuanIndex == 1 ? 'xuan' : ''" @click="xuan(1)">
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="xuanIndex == 1" />动态资讯
      </view>
    </view>-->
    <scroll-view
      scroll-y
      class="list"
      :style="'height: calc(100vh - ' + curTop - safeBottom + 'px );'"
      @scrolltolower="down"
      refresher-background="#f5f5f5"
    >
      <view style="display: flex; flex-direction: column">
        <view
          v-for="(item, index) in WatchList"
          :key="index"
          @click="details(item.id)"
          style="
            display: flex;
            padding: 22rpx 30rpx;
            width: 100%;
            background-color: #f2f2f2;
            margin-bottom: 24rpx;
            border-radius: 10rpx;
          "
        >
          <view
            style="
              width: 65%;
              color: #666666;
              font-size: 26rpx;
              font-weight: 400;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ item.title }}</view
          >
          <view
            style="color: #666666; font-size: 24rpx; text-align: center; width: 35%"
            >{{ item.createDate }}</view
          >
        </view>
      </view>

      <view v-if="WatchList.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="WatchList.length && !downStatus">没有更多了</view>
    </scroll-view>
    <view v-if="scrollTop > 0" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
import Tabbar from "@/components/tabbar.vue";

import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
//  #endif
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      statusBarHeight,
      xuanIndex: -1,
      list: [
        {
          num: 1,
          name: "全部",
          valueNum: "",
        },
      ],
      TabCur: 0,
      scrollLeft: 0,
      id: "",
      WatchList: [],
      imgUrl: this.$imgSrc,
      showType: false,
      orderSort: "1",
      scrollTop: "0",
      trigger: false,
      downStatus: true,
      upStatus: true,
      pageSize: 10,
      pageNo: 1,
      curTop: 0,
      safeBottom: 0,
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  onLoad(options) {
    this.getType();
    this.getWatch();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
    const res = uni.getSystemInfoSync();
    this.safeBottom = res.safeAreaInsets.bottom / 2;
  },
  async onPullDownRefresh() {
    this.WatchList = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getWatch();
    }
  },
  methods: {
    totop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    //#ifdef H5

    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    // #endif
    xuan(index) {
      this.xuanIndex = index;
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getType() {
      this.$myRequest
        .get("/mob/home/getDictionaries", {
          pageNo: 1,
          pageSize: 10,
          type: 13,
        })
        .then((res) => {
          this.list = this.list.concat(res.list);
        });
    },
    down() {
      if (this.downStatus) {
        this.pageNo++;
        this.getWatch();
      }
    },
    async up() {
      this.WatchList = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getWatch();
      }
    },
    getWatch() {
      let that = this;
      this.upStatus = false;
      this.$myRequest
        .get("/mob/home/getTipsInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
        })
        .then((res) => {
          if (!res.page.list.length) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          this.WatchList = this.WatchList.concat(res.page.list);
          uni.stopPullDownRefresh();
          this.$nextTick(function () {
            uni
              .createSelectorQuery()
              .in(this)
              .select(".list")
              .boundingClientRect((result) => {
                if (result) {
                  that.curTop = result.top;
                }
              })
              .exec();
          });
        });
    },
    async tabSelect(e) {
      this.id = e.currentTarget.dataset.id;
      if (this.TabCur == e.currentTarget.dataset.index) {
        return;
      }
      this.TabCur = e.currentTarget.dataset.index;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      this.WatchList = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        await this.getWatch();
      }
    },
    details(id) {
      uni.navigateTo({
        url: "/pages_my/tipsDetail?id=" + id,
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  image {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }
}

.hui {
  position: fixed;
  right: 30rpx;
  bottom: 154rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 26rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  // line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  image {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    right: 30rpx;
    /* #ifdef MP  */
    // top: 120rpx;
    /* #endif */
    /* #ifdef H5 || APP-PULS */
    // top: 30rpx;
    /* #endif */
  }
}

.view {
  position: relative;
  font-size: 32rpx;
  border: 0;
  color: #333333;
  margin-right: 0;

  image {
    position: absolute;
    width: 44rpx;
    height: 24rpx;
    top: 66rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.cur {
  color: #64b6a8;
  border: 0;
  transform: scale(1.1);
}

.title {
  position: relative;
  margin-top: 28rpx;
  margin-left: 30rpx;

  view {
    position: absolute;
    top: 0;
    font-size: 32rpx;

    image {
      position: absolute;
      width: 44rpx;
      height: 24rpx;
      top: 44rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .xuan {
    transform: scale(1.1);
    color: #64b6a8;
  }
}

.list {
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  width: 690rpx;

  .li {
    width: 100%;
    height: 200rpx;
    margin-bottom: 24rpx;

    image {
      width: 300rpx;
      height: 200rpx;
    }

    .li_1 {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-left: 24rpx;
      height: 200rpx;

      .tit {
        // width: 366rpx;
        font-size: 34rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; //想要的行数
        -webkit-box-orient: vertical;
        min-height: 138rpx;
      }

      .shijian {
        position: absolute;
        bottom: 4rpx;
        font-size: 26rpx;
      }
    }
  }
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>
